const path = require('path');

const HTMLWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {

    entry : './src/index.ts',

    devtool: 'source-map',

    mode : 'development',

    output:{
        path : path.resolve(__dirname, 'dist'),
        filename : 'bundle.js',
        environment:{
            arrowFunction:false
        }
    },
    module : {
        rules : [
            {
                test : /\.ts$/,
                use : [
                    // 配置 babel
                    {
                        loader : 'babel-loader',
                        options : {
                            presets:[
                                [
                                    '@babel/preset-env',
                                    // 配置 corejs,可以打上 polyfill兼容低版本浏览器
                                    {
                                        targets : {
                                            "chrome":"60",
                                            "ie":"10"
                                        },
                                        "corejs":{
                                            version : 3
                                        },
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                exclude:/node_modules/
            },
            {
                test:/.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    {
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers:'last 3 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 50000,
                    name: 'img/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            lang:'zh-CN',
            template:"src/index.html"
        })
    ],
    // 解析模块的配置，ts 和 js 文件都可以作为模块文件
    resolve :{
        extensions:['.ts', '.js']
    }
};